<template>
	<div class="box" style="padding: 10px;">
		<div style="width: 100%;height: 92vh;overflow-y: scroll;">
			<van-cell-group>
				<van-field :value="obj.topic" placeholder="请输入题目" :border="true" label="题目" type="textarea" autosize
					clickable input-align="left" @change="changeInput($event, 'topic')" />

				<div @click="showSelectClass = true">
					<van-field :value="obj.topicClass" is-link readonly label="题目分类" placeholder="请选择题目分类" />
				</div>
				<van-popup :show="showSelectClass" round position="bottom" @close='showSelectClass = false'>
					<van-picker :columns="topicClassList" show-toolbar @cancel="showSelectClass = false"
						@confirm="selectTopicType($event , 'topicClass' , 'showSelectClass')" />
				</van-popup>

				<div @click="showSelectType = true">
					<van-field :value="obj.topicType" is-link readonly label="题目类型" placeholder="请选择题目类型" />
				</div>
				<!-- 选择类型弹出框 -->
				<van-popup :show="showSelectType" round position="bottom" @close='showSelectType = false'>
					<van-picker :columns="topicTypeList" show-toolbar @cancel="showSelectType = false"
						@confirm="selectTopicType($event , 'topicType' , 'showSelectType')" />
				</van-popup>

				<div @click="showSelectDifficulty = true">
					<van-field :value="obj.difficulty" is-link readonly label="难易程度" placeholder="请选择难易程度" />
				</div>
				<!-- 选择类型弹出框 -->
				<van-popup :show="showSelectDifficulty" round position="bottom" @close='showSelectDifficulty = false'>
					<van-picker :columns="difficulty" show-toolbar @cancel="showSelectDifficulty = false"
						@confirm="selectTopicType($event , 'difficulty' , 'showSelectDifficulty')" />
				</van-popup>

				<van-field :value="obj.createTime" placeholder="创建时间" :border="true" label="创建时间" readonly
					input-align="left" @change="changeInput($event, 'createTime')" />

				<div @click="addSelect">
					<van-field is-link readonly label="添加选项" placeholder="点击添加选项" />
				</div>
				<van-popup :show="showAddAnswer" round position="center" @close='closePopup'>
					<div style="width: 95vw;">
						<van-field v-model="option" label="选项" input-align="left" placeholder="请输入选项" type="textarea"
							autosize clickable @change="(e)=>{option = e.detail}" />
					</div>
				</van-popup>
				
				<van-field :value="obj.explain" placeholder="请输入答案解释" :border="true" label="答案解释" type="textarea" autosize
					clickable input-align="left" @change="changeInput($event, 'explain')" />
			</van-cell-group>

			<div class="options">
				<!-- <van-radio-group :value="obj.answer" @change="onChange" v-if="['单选','判断'].includes(obj.topicType)">
					<van-radio :name="item.value" icon-size='16px' v-for="(item,index) in obj.options" :key="index">
						<span>{{item.value}}: {{item.label}}</span>
						<van-icon name="cross" style="margin-left: 10px;" @click="delOption(index)" />
					</van-radio>
				</van-radio-group>

				<van-checkbox-group :value="obj.answer" @change="onChange" v-if="obj.topicType == '多选'">
					<van-checkbox :name="item.value" icon-size='16px' v-for="(item,index) in obj.options" :key="index"
						shape="square">
						<span>{{item.value}}: {{item.label}}</span>
						<van-icon name="cross" style="margin-left: 10px;" @click="delOption(index)" />
					</van-checkbox>
				</van-checkbox-group> -->

				<div v-if="obj.topicType == '问答'" class="wenda">
					<p 
						v-for="(item,index) in obj.options" 
						style="
							white-space: pre-wrap;
							width: 100v%;
							overflow-wrap: break-all
						" 
						:key="index" 
						v-text="`${item.value}${item.label}`">
					</p>
				</div>
				
				<div class="select_list" v-else>
					<div 
						v-for="(item,index) in obj.options" 
						:key="index" 
						:style="{background:verify(item.value , obj.answer)}"
						@click="onChange(item.value)"
					>
						<span>{{item.value}}: {{item.label}}</span>
						<span>
							<!-- 删除按钮 -->
							<van-icon name="cross" style="margin-right: 10px;" @click="delOption(index)" />
							<!-- 修改按钮 -->
							<van-icon name="edit" @click="editOpiton(item , index)"/>
						</span>
					</div>
				</div>
			</div>
		</div>

		<div class="btn">
			<button @click="save">保存</button>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				obj: {
					// 创建时间
					createTime: '',
					options: [],
				},
				showSelectType: false,
				showSelectDifficulty: false, //难易程度弹出框
				showAddAnswer: false, // 点击添加答案
				showSelectClass: false, // 题目分类
				// 类型列表
				topicTypeList: [], // 题目类型
				topicClassList: [], //题目分类
				difficulty: [], //题目难易程度
				option: '',
				// 选项
				select_dxOrdx: ["A", "B", "C", "D", "E", "F", "G"],
				select_pd: ["√", "×"],
				id: '',
				
				isEdit:false,
				editIndex:0
			}
		},

		onLoad(option) {
			if (option.id) {
				this.id = option.id
				this.getDetail()
			}
		},

		mounted() {
			this.obj.createTime = this.$getTime('yyyy-MM-DD')
			this.getDateDictionary()
		},

		methods: {
			// 获取数据字典内容
			async getDateDictionary() {
				// 题目分类
				let result = await this.$axios('overallSituation', {
					databaseName: 'dataDictionaryDetail',
					state: 'look',
					identification: 'tmfl',
				}, true)
				this.topicClassList = []
				result.data.forEach(item => {
					this.topicClassList.push(item.name)
				})

				let result1 = await this.$axios('overallSituation', {
					databaseName: 'dataDictionaryDetail',
					state: 'look',
					identification: 'nycd',
				}, true)
				
				this.difficulty = []
				result1.data.forEach(item => {
					this.difficulty.push(item.name)
				})
				
				let result2 = await this.$axios('overallSituation', {
					databaseName: 'dataDictionaryDetail',
					state: 'look',
					identification: 'tmlx',
				}, true)
				
				this.topicTypeLis = []
				result2.data.forEach(item => {
					this.topicTypeList.push(item.name)
				})

			},

			// 查询详情
			getDetail() {
				this.$axios('overallSituation', {
					databaseName: 'topicList',
					state: 'look',
					_id: this.id
				}, true).then(res => {
					if (res.code == 200) {
						this.obj = res.data[0] || {}
					} else {
						uni.showToast({
							title: '查询详情失败',
							icon: "none",
							duration: 2000
						})
					}
				})
			},

			// 保存内容
			async save() {

				if (!this.obj.topic) {
					uni.showToast({
						title: "请输入题目",
						icon: "none",
						duration: 2000
					})
					return
				}

				if (this.obj.options.length == 0) {
					uni.showToast({
						title: "请添加选项",
						icon: "none",
						duration: 2000
					})
					return
				}

				// 校验
				if ((Array.isArray(this.obj.answer) && this.obj.length == 0) || !this.obj.answer) {
					uni.showToast({
						title: "请选择答案",
						icon: "none",
						duration: 2000
					})
					return
				}

				if (!this.obj.topicClass) {
					uni.showToast({
						title: "请选择题目分类",
						icon: "none",
						duration: 2000
					})
					return
				}

				if (!this.obj.difficulty) {
					this.obj.difficulty = this.difficulty[0]
				}

				console.log(this.obj, 'this.obj');
				let result = await this.$axios('overallSituation', {
					databaseName: 'topicList',
					state: this.id ? 'update' : 'add',
					...this.obj
				}, true)

				if (result.code == 200) {
					uni.showToast({
						title: "操作成功",
						icon: "none",
						duration: 2000
					})
					uni.navigateBack({
						delta: 1,
					});
				}
			},

			// 输入框发生变化
			changeInput(e, str) {
				this.obj[str] = e.detail;
			},

			// 选择类型 \ 难易程度
			selectTopicType(e, str, pop) {
				if (['判断', '单选'].includes(e.detail.value)) {
					this.obj.answer = ''
				} else if (e.detail.value == '多选') {
					this.obj.answer = []
				}
				this.obj[str] = e.detail.value || ''
				this[pop] = false
			},

			// 点击添加选项
			addSelect() {
				if (!this.obj.topicType) {
					uni.showToast({
						title: "请先选择题目类型",
						icon: "none",
						duration: 2000
					})
					return
				}

				// 判断如果是判断题,就只能添加两条选项
				if (this.obj.topicType == '判断') {
					if (this.obj.options.length >= 2) {
						uni.showToast({
							title: "判断题只能添加两条选项",
							icon: "none",
							duration: 2000
						})
						return
					}
				} else if (this.obj.topicType == '问答') {
					if (this.obj.options.length >= 1) {
						this.option = this.obj.options[0].label
					}
				}
				this.showAddAnswer = true
			},

			// 选择答案
			onChange(e) {
				if(this.obj.topicType == '多选'){
					if(!Array.isArray(this.obj.answer)){
						this.obj.answer = []
					}
					let index = this.obj.answer.indexOf(e)
					if(index != '-1'){
						this.obj.answer.splice(index , 1)
					}else {
						this.obj.answer.push(e)
					}
				}else {
					this.$set(this.obj, 'answer', e)
				}
			},
			
			// 校验题目 , 修改背景色
			verify(option , answer){
					// 判断答案类型 当前答案显示绿色
					if(Array.isArray(answer)){
						if(answer.includes(option)){
							return '#c5e1a5'
						}
					}else {
						if(option == answer){
							return '#c5e1a5'
						}
					}
			},
			
			// 关闭添加答案弹出框
			closePopup() {
				if (!this.option) {
					uni.showToast({
						title: '选项内容不能为空',
						icon: 'none',
						duration: 2000
					})
					this.showAddAnswer = false
					return
				}
				uni.showModal({
					cancelText: '不保存',
					confirmText: '保存',
					title: "确定要保存这条选项吗？",
					success: (e) => {
						console.log(e, 'e');
						if (e.confirm) {
							// 判断是不是修改
							if(this.isEdit){
								this.obj.options[this.editIndex].label = this.option 
								this.isEdit = false
							}else {
								if (this.obj.topicType == '判断') {
									this.obj.options.push({
										label: this.option,
										value: this.select_pd[this.obj.options.length]
									})
								} else if (['单选', '多选'].includes(this.obj.topicType)) {
									this.obj.options.push({
										label: this.option,
										value: this.select_dxOrdx[this.obj.options.length]
									})
								} else if (this.obj.topicType == '问答') {
									this.obj.options[0] = {
										label: this.option,
										value: '答：'
									}
									this.obj.answer = this.option
								}
							}
						}
						this.option = ''
						this.showAddAnswer = false
					}
				})
			},

			// 删除选项
			delOption(index) {
				uni.showModal({
					cancelText: '取消',
					confirmText: '确定',
					title: "确定要删除这条选项吗？",
					success: (e) => {
						if (e.confirm) {
							this.obj.options.splice(index, 1)
						}
					}
				})
			},
			
			// 修改选项
			editOpiton(item , index){
				this.option = item.label
				this.showAddAnswer = true
				this.isEdit = true
				this.editIndex = index
			}
		}
	}
</script>

<style scoped>
	.options {
		background-color: #fff;
		width: 100%;
		padding: 15px;
		box-sizing: border-box;
	}

	>>>.van-radio {
		align-items: center;
		display: flex;
		overflow: hidden;
		-webkit-user-select: none;
		user-select: none;
		margin: 5px 0 !important;
		font-size: 12px !important;
	}

	.btn {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn button {
		width: 96%;
		height: 35px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 12px;
		font-weight: 700;
		background: #6bc525;
	}

	>>>.van-checkbox {
		align-items: center;
		display: flex;
		overflow: hidden;
		-webkit-user-select: none;
		user-select: none;
		margin: 5px 0 !important;
		font-size: 12px !important;
	}

	.wenda {
		width: 100%;
		font-size: 12px;
		color: #333;
		line-height: 20px;
	}
	
	>>> .van-field__control {
		color: #333 !important;
		font-weight: 700;
		font-size: 12px !important;
	}
	
	.select_list {
		width: 100%;
		margin-top: 15px;
		overflow-y: scroll;
	}
	
	.select_list div {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		background: #f1f1f1;
		margin-bottom: 5px;
		border-radius: 5px;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.select_list div span:nth-child(1){
		width: 80%;
		display: inline-block;
		word-wrap: break-word;
	}
</style>